<template>
  <navigatorComp
    title="支付"
    bgcColor="#121512"
    fontColor="#fff"
  ></navigatorComp>

  <view class="pay_title">需支付</view>
  <view class="pay_price">¥{{ Number(price).toFixed(2) }}</view>

  <view class="pay_way">
    <view class="pay_way_item">
      <view class="display_flex">
        <image
          src="http://112.124.50.179:8888/imgs/mine/aliPay.png"
          mode=""
          class="pay_icon"
        ></image>
        支付宝
      </view>
      <image
        v-if="checkWay === 1"
        src="http://112.124.50.179:8888/imgs/mine/pay_check.png"
        mode=""
        class="pay_check"
      ></image>
      <image
        v-else
        src="http://112.124.50.179:8888/imgs/mine/pay_noCheck.png"
        mode=""
        class="pay_check"
        @click="changePayWay(1)"
      ></image>
    </view>
    <view class="pay_way_item">
      <view class="display_flex">
        <image
          src="http://112.124.50.179:8888/imgs/mine/wxPay.png"
          mode=""
          class="pay_icon"
        ></image>
        微信
      </view>
      <image
        v-if="checkWay === 2"
        src="http://112.124.50.179:8888/imgs/mine/pay_check.png"
        mode=""
        class="pay_check"
      ></image>
      <image
        v-else
        src="http://112.124.50.179:8888/imgs/mine/pay_noCheck.png"
        mode=""
        class="pay_check"
        @click="changePayWay(2)"
      ></image>
    </view>
  </view>
  <!-- 	<u-keyboard ref="uKeyboard" mode="number" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false"
		@change="valChange" @backspace="backspace" :show='showKeyboard' @close="close" dotDisabled>
		<view class="flex_center u-bg-white u-p-t-40">
			<u-code-input :maxlength="6" v-model="paymentPassword" dot></u-code-input>
		</view>
	</u-keyboard> -->
  <KeyBoard ref="KeyBoardRef" @sendPass="sendPass" />
  <footerBtn
    width="622rpx"
    name="确认支付"
    @clickBtn="confirmPay"
    bgcColor="transparent"
  ></footerBtn>
</template>

<script setup>
import KeyBoard from "@/components/keyboard.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import navigatorComp from "/components/navigator/index.vue";
import footerBtn from "/components/footerBtn/index.vue";
import MineApi from "@/API/mine/index.js";
const mineApi = new MineApi();

onLoad((o) => {
  if (o.item) {
    price.value = JSON.parse(o.item).rechargeAmount;
    rechargeId.value = JSON.parse(o.item).rechargeId;
  }
});

const checkWay = ref(1);
const price = ref(0);
const rechargeId = ref(0);
const KeyBoardRef = ref();

/**
 * 支付成功
 */
const sendPass = (e) => {
  mineApi
    .rechargeYb({
      rechargeId: rechargeId.value,
      paymentPassword: e,
    })
    .then(async (res) => {
      if (res.code === 0) {
        uni.showToast({
          title: "支付成功",
          duration: 1000,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      }
    })
    .catch(() => {});
};
const confirmPay = () => {
  // KeyBoardRef.value.showKeyboard = true;
  sendPass("");
};
</script>

<style lang="scss">
page {
  background-color: #121512;
  /* #ifdef H5 */
  padding-top: 0;
  /* #endif */
}

.pay_title {
  font-weight: 400;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 42rpx;
  margin-top: 48rpx;
  text-align: center;
}

.pay_price {
  font-weight: 600;
  font-size: 80rpx;
  color: #ffffff;
  line-height: 94rpx;
  text-align: center;
  margin-top: 40rpx;
}

.pay_way {
  margin-top: 182rpx;
  padding: 0 40rpx;

  .pay_way_item {
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 33rpx;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 64rpx;
  }

  .pay_icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 32rpx;
  }

  .pay_check {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
